<template>
  <div class="user">
    <header>
      <div class="handle flex-col box-sizing padding-15">
        <div class="position-r" @click="toRouter('msg_list')">
          消息
          <!-- <span class="num position-a dis-b active bgred cfff font-12">3</span> -->
        </div>
        <div class="border-l" @click="toRouter('user_set')">设置</div>
      </div>
      <div></div>
      <div class="user_info flex-col">
        <div class="img-bg user_img box-center" :style="{backgroundImage:`url(${userInfo.wximpurl})`}">
          <!-- <i class="iconfont icon-yonghu font-28"></i> -->
          <!-- <img :src="" alt=""> -->
        </div>
        <div class="box1 font-22 font-w">{{userInfo.username}}</div>
        <div class="bgred cfff tag box-center">{{userInfo.user_level | userRank}}</div>
      </div>
      <ul class="padding-10 flex-parent">
        <li class="padding-5" @click="toRouter('my_money')">
          <div class="bgfff padding-l10">
            <i class="iconfont icon-haoyouyongjinxishu font-22"></i>
            <p class="">我的佣金</p>
          </div>
        </li>
        <li class="padding-5" @click="toRouter('group')">
          <div class="bgfff padding-l10">
            <i class="iconfont icon-tuandui font-22"></i>
            <p class="">我的团队</p>
          </div>
        </li>
        <li class="padding-5" @click="toRouter('my_customer')">
          <div class="bgfff padding-l10">
            <i class="iconfont icon-kehu font-22"></i>
            <p class="">我的客户</p>
          </div>
        </li>
      </ul>
      <div class="padding-15 cred flex-col flex-middle" @click="toRouter('user_info')">
        <div class="box1">
          为了避免您无法接受佣金奖励，请完善个人信息
        </div>
        <i class="iconfont icon-jiantou"></i>
      </div>
    </header>
    <main>
      <div class="user_num bgfff">
        <div class="user_tit border-b flex-col flex-middle">
          <div class="font-w box1">关键数据</div>
          <div class="btn c82 font-12 box-center" :class="{active:select_type===0}" @click="getData(0)">今天</div>
          <div class="btn c82 font-12 box-center" :class="{active:select_type===1}" @click="getData(1)">本周</div>
          <div class="btn c82 font-12 box-center" :class="{active:select_type===2}" @click="getData(2)">本月</div>
        </div>
        <ul class="flex-parent" v-show="select_type===0">
          <li class="border-b border-r box-center" @click="toRouter('customer_plan',{id:0,i:select_type})">
            <span class="cred">{{userData0.call}}</span>
            <div>打电话</div>
          </li>
          <li class="border-b border-r box-center" @click="toRouter('customer_plan',{id:1,i:select_type})">
            <span class="cred">{{userData0.backup}}</span>
            <div>报备</div>
          </li>
          <li class="border-b border-r box-center" @click="toRouter('customer_plan',{id:2,i:select_type})">
            <span class="cred">{{userData0.look}}</span>
            <div>带看</div>
          </li>
          <li class="border-b border-r box-center" @click="toRouter('customer_plan',{id:3,i:select_type})">
            <span class="cred">{{userData0.sign}}</span>
            <div>签约</div>
          </li>
          <li class="border-b border-r box-center" @click="toRouter('index')">
            <span class="cred">{{userData0.sell}}</span>
            <div>在售房源</div>
          </li>
          <li class="border-b border-r box-center">
            <span class="cred">{{userData0.backMoney}}</span>
            <div>退款</div>
          </li>
          <li class="border-b border-r box-center">
            <span class="cred">{{userData0.pass}}</span>
            <div>已结佣</div>
          </li>
          <li class="border-b border-r box-center">
            <span class="cred">{{userData0.notPass}}</span>
            <div>待结佣</div>
          </li>
        </ul>
        
        <ul class="flex-parent" v-show="select_type===1">
          <li class="border-b border-r box-center" @click="toRouter('customer_plan',{id:0,i:select_type})">
            <span class="cred">{{userData1.call}}</span>
            <div>打电话</div>
          </li>
          <li class="border-b border-r box-center" @click="toRouter('customer_plan',{id:1,i:select_type})">
            <span class="cred">{{userData1.backup}}</span>
            <div>报备</div>
          </li>
          <li class="border-b border-r box-center" @click="toRouter('customer_plan',{id:2,i:select_type})">
            <span class="cred">{{userData1.look}}</span>
            <div>带看</div>
          </li>
          <li class="border-b border-r box-center" @click="toRouter('customer_plan',{id:3,i:select_type})">
            <span class="cred">{{userData1.sign}}</span>
            <div>签约</div>
          </li>
          <li class="border-b border-r box-center" @click="toRouter('index')">
            <span class="cred">{{userData1.sell}}</span>
            <div>在售房源</div>
          </li>
          <li class="border-b border-r box-center">
            <span class="cred">{{userData1.backMoney}}</span>
            <div>退款</div>
          </li>
          <li class="border-b border-r box-center">
            <span class="cred">{{userData1.pass}}</span>
            <div>已结佣</div>
          </li>
          <li class="border-b border-r box-center">
            <span class="cred">{{userData1.notPass}}</span>
            <div>待结佣</div>
          </li>
        </ul>
        <ul class="flex-parent" v-show="select_type===2">
          <li class="border-b border-r box-center" @click="toRouter('customer_plan',{id:0,i:select_type})">
            <span class="cred">{{userData2.call}}</span>
            <div>打电话</div>
          </li>
          <li class="border-b border-r box-center" @click="toRouter('customer_plan',{id:1,i:select_type})">
            <span class="cred">{{userData2.backup}}</span>
            <div>报备</div>
          </li>
          <li class="border-b border-r box-center" @click="toRouter('customer_plan',{id:2,i:select_type})">
            <span class="cred">{{userData2.look}}</span>
            <div>带看</div>
          </li>
          <li class="border-b border-r box-center" @click="toRouter('customer_plan',{id:3,i:select_type})">
            <span class="cred">{{userData2.sign}}</span>
            <div>签约</div>
          </li>
          <li class="border-b border-r box-center" @click="toRouter('index')">
            <span class="cred">{{userData2.sell}}</span>
            <div>在售房源</div>
          </li>
          <li class="border-b border-r box-center">
            <span class="cred">{{userData2.backMoney}}</span>
            <div>退款</div>
          </li>
          <li class="border-b border-r box-center">
            <span class="cred">{{userData2.pass}}</span>
            <div>已结佣</div>
          </li>
          <li class="border-b border-r box-center">
            <span class="cred">{{userData2.notPass}}</span>
            <div>待结佣</div>
          </li>
        </ul>

      </div>
      <div class="padding-15 flex-col bgfff margin-tb10" style="margin:.1rem 0;" @click="toRouter('collection')">
        <div class="box1 font-w">我的收藏</div>
        <i class="iconfont icon-jiantou"></i>
      </div>
      <div class="padding-15 flex-col bgfff margin-tb10" style="margin:.1rem 0;" @click="toRouter('feedback')">
        <div class="box1 font-w">意见反馈</div>
        <i class="iconfont icon-jiantou"></i>
      </div>
    </main>
    <v-header></v-header>
    <router-view></router-view>
  </div>
</template>

<script>
import header from "../../components/index_nav";
export default {
  name: "user",
  data() {
    return {
      userInfo:{},
      userData0: {},
      userData1: {},
      userData2: {},
      select_type: 0,//查询类型 0 按当天 1 按当周 3 按当月
      select_type1: 0,
      select_type2: 0,
      select_type0: 0
    };
  },

  created() {
    this.$store.commit("index_nav", 3);
    this.userInfo = this.getCache('userInfo');
  },
  components: {
    "v-header": header
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      that.getData();
    });
  },
  methods: {
    getData(i = 0) {
      let select_type = (this.select_type = i);
      if (this["select_type" + i]) {
        return;
      } else {
        this["select_type" + i] = 1;
      }
      let that = this;
      this.http
        .post("userandclient/keyData", {
          page: 1,
          limit: 10,
          select_type //查询类型 0 按当天 1 按当周 3 按当月
        })
        .then(res => {
          that['userData'+i] = res.data;
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.user {
  padding-bottom: 0.5rem;
}
header {
  .handle {
    display: flex;
    justify-content: flex-end;
    & > div {
      padding: 0.02rem 0.15rem;
      .num {
        width: 0.15rem;
        height: 0.15rem;
        border-radius: 0.15rem;
        text-align: center;
        line-height: 0.15rem;
        display: none;
        top: -0.05rem;
        right: 0.05rem;
        &.active {
          display: block;
        }
      }
      &:last-child {
        padding-right: 0;
      }
    }
  }
  .user_info {
    align-items: center;
    .user_img {
      width: 0.6rem;
      height: 0.6rem;
      border-radius: 100%;
      margin: 0.1rem 0.2rem;
    }
    .tag {
      width: 0.75rem;
      height: 0.3rem;
      border-top-left-radius: 0.15rem;
      border-bottom-left-radius: 0.15rem;
    }
  }
  ul {
    li {
      box-sizing: border-box;
      flex: 0 0 33.33%;
      & > div {
        box-sizing: border-box;
        width: 1.05rem;
        height: 0.65rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        p {
          padding-top: 0.08rem;
        }
      }
    }
  }
}
main {
  .user_num {
    padding-bottom: 0.25rem;
    .user_tit {
      padding: 0.17rem 0.15rem;
      .btn {
        height: 0.2rem;
        width: 0.35rem;
        &.active {
          background: red;
          color: #fff;
          border-radius: 0.04rem;
        }
      }
    }
    li {
      box-sizing: border-box;
      flex: 0 0 25%;
      height: 0.62rem;
      div {
        padding-top: 0.05rem;
      }
    }
  }
}
</style>
